<template>
    <div v-loading="loadingData" class="userTable">
        <el-table :data="tableData" border style="width: 100%" 
            :header-cell-class-name="headerCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column prop="userName" label="昵称"  width="200"></el-table-column>
            <el-table-column prop="serverName" label="服务名称"  width="200"></el-table-column>
            <el-table-column label="资料认证照" width="200">
                <template slot-scope="scope">
                    <div class="imgPath-box margin-auto">
                        <img :src="$imgPath(scope.row.serverImage)" alt="" width="100" height="50">
                        <span class="big-pic"></span>
                        <span class="big-pic-font" @click="bigPic($imgPath(scope.row.serverImage))">点击查看大图</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="服务介绍" width="200" align="center"> 
                <template slot-scope="scope">
                    <span class="table-slice">{{scope.row.descript.length > 25 ? (scope.row.descript.slice(0,25)) : scope.row.descript}}<a class="chakanxq" href="#" v-if="scope.row.descript.length>15">...查看详情</a></span>
                </template>
            </el-table-column>
            <el-table-column label="语音介绍" width="200">
                <template slot-scope="scope">
                    <audio controls="controls" class="audio-mp3">
                        <source :src="$imgPath(scope.row.audioUrl)" type="audio/mpeg">
                        Your browser does not support the audio tag.
                    </audio>
                </template>
            </el-table-column>
            <el-table-column label="属性" width="200" class="aaaa">
                <template slot-scope="scope">
                    <span class="table-slice">{{`${scope.row.serverName}/${scope.row.firstName}`}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  fixed="right"  width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">通过</el-button>
                    <el-button type="text" size="small" @click="toDealWith(scope.row)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="问题处理"
            :visible.sync="dialogVisible"
            width="670px">
            <ul class="user-box clearfix">
                <li>
                    <label>编号</label>
                    <span class="input">{{problemObj.id}}</span>
                </li>
                <li>
                    <label>处理结果</label>
                    <textarea class="liTextarea" name="" id="" cols="30" rows="10"></textarea>
                </li>
                <li>
                    <label>奖励/补偿</label>
                    <span>
                        <font>￥5.00</font>
                        <font>￥10.00</font>
                        <font>￥20.00</font>
                    </span>
                </li>
                <li>
                    <label>角色描述</label>
                    <div class="adduser-buttom">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
                    </div>
                </li>
            </ul>
        </el-dialog>
        <!--分页开始-->
        <div class="block">
            <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
            <div class="pageComponentFoot">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cpage"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pagesize"
                    layout="total,prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
            <div style="clear:both"></div>
        </div>
        <!--分页结束-->
    </div>
</template>

<script>
    import HttpService from '../../api/service'
    import '@/mock/user.js';

    export default {
        data() {
            return {  
                dialogVisible:false,
                totalPage:'',           //  总页数
                cpage:1,                //  当前页
                pagesize:10,            //  每页显示数
                totalCount:0,         //  总条数
                tableData: [],            
                multipleSelection: [],       
                select_word: '',
                loadingData: false,
                problemObj:'',
            }
        },
        created(){         
        },
        mounted() {  
            this.allUserServiceAuth()
        },
        methods: {
            // 设置header颜色
            headerCellClassName({row, rowIndex}){
                return 'header-row';
            },
            // 设置内容行的颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'even-row';
                }   
                return '';
            },
            // 服务列表
            allUserServiceAuth(){
                let parmer = {
                    page: this.cpage - 1,
                    size: this.pagesize
                }
                HttpService.service.allUserServiceAuth(parmer,resp=>{
                    this.tableData = resp.content
                    this.totalPage = resp.totalPages
                    this.totalCount = resp.totalElements
                })
            },
            // 通过   
            handleClick(row) {
                console.log(row);
            },
            hidden(){},
            // 查看大图
            bigPic(imgPath){
                this.$alert('<img src="'+ imgPath +'">',{
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal:true
                })
            },
            // 处理问题
            toDealWith(item){
                this.dialogVisible = true
                this.problemObj = item
            },
            handleSizeChange(val) {
                this.cpage = val
                this.allUserServiceAuth()
            },
            handleCurrentChange(val) {
                this.cpage = val
                this.allUserServiceAuth()
            }
        }
    }
</script>

<style>
    
</style>
<style src="../../assets/css/problem.css"></style>